<template>
    <div class="model">
         <el-dialog title="发表内容" :visible.sync="dialogFormVisible" width='40%'>
            <el-form :model="form">
                <el-form-item label="题目" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="form.textarea">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeModel">取 消</el-button>
                <el-button type="primary" @click="closeModel">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "model",
  props:['dialogFormVisible'],
  data() {
    return {
      form: {
        name: "",
        textarea: "",
      },
      formLabelWidth: "100px"
    };
  },
  computed:{
      ...mapState(['news']),
  },
  methods:{
       closeModel(){
         let editData = {
            id:this.news.length,
            title:this.form.name,
            author:localStorage.name,
            content:this.form.textarea,
            time:new Date()
         }
         this.form.name = '';
         this.form.textarea = '';
         editData.time && this.$emit('childByValue',editData)
     }
  }
};
</script>

<style scoped lang='scss'>
</style>